<template>
<div class="m-fixedBar">
    <ul class="fixed-nav">
        <li>
            <a class="m-icons m-icons- m-icons-service-fixed" data-src href="">
                <a class="iconfont icon-kefu"></a>
            </a>
            <p class="text">联系客服</p>
            <div class="fixed-pop fixed-service-pop">
                <div class="pop-inner">
                    <p class="info-title">
                        小米有品平台问题，建议反馈，商户和物流问题投诉等请拨打 小米有品客服热线
                    </p>
                    <p class="info-phone">952899</p>
                    <p class="info-day">(周一至周日 8：00-22：00)</p>
                    <p class="info-des">小米/米家自营品牌，手机电视智能硬件商品或订单发货/退款售后问题 请拨打小米自营客服热线</p>
                    <p class="info-phone">400-100-5678</p>
                    <p class="info-day">(周一至周日 8：00-18：00)</p>
                </div>
                <a class="m-icons m-icons-arrow-right" data-src=" " href=""></a>
            </div>
        </li>
        <li>
            <a class="m-icons m-icons- m-icons-service-fixed" data-src href="">
                <a class="iconfont icon-erweima"></a>
            </a>
            <p class="text">下载APP</p>
            <div class="fixed-pop fixed-down-pop">
                <div class="pop-inner">
                    <img class="https://cdn.cnbj1.fds.api.mi-img.com/youpin-pc/production/YouPin_PC/static3/media/code.fcced6cb.png">
                    <p class="site-info">
                        下载小米有品APP
                        <br>得新人礼包
                    </p>
                 </div>
            </div>
        </li>
        <li>
            <a class="m-icons m-icons- m-icons-service-fixed" data-src href="">
                <a class="iconfont icon-daishouhuolihe"></a>
            </a>
            <p class="text">新人有礼</p>
            <div class="fixed-pop fixed-gift-pop">
                <div class="pop-inner">
                    <div class="gift-bg"></div>
                    <img class="qr-code" src="https://cdn.cnbj1.fds.api.mi-img.com/youpin-pc/production/YouPin_PC/static3/media/code.fcced6cb.png">
                    <p class="site-info">立即扫码下载·小米有品 APP</p>
                </div>
                <a class="m-icons m-icons-arrow-right" data-src=" " href=""></a>
            </div>
        </li>
        <li>
            <a class="m-icons m-icons- m-icons-service-fixed" data-src href="">
                <a class="iconfont icon-weixin"></a>
            </a>
            <p class="text">关注微信</p>
            <div class="fixed-pop fixed-wx-pop">
                <div class="pop-inner">
                <img class="qr-code" src="https://cdn.cnbj1.fds.api.mi-img.com/youpin-pc/production/YouPin_PC/static3/media/wx_code.52bcbea0.png">
                <p class="site-info">扫码关注小米有品微信服务号，签到积分赢大奖</p>
            </div>
                <a class="m-icons m-icons-arrow-right" data-src=" " href=""></a>
            </div>
        </li>
        <li>
            <a class="m-icons m-icons- m-icons-icons-top">
                <a class="iconfont icon-huojian"></a>
            </a>
            <p class="text">回到顶部</p>
            
        </li>
        
    </ul>
</div>
</template>
<script>

</script>

<style lang="less" scoped>
//固定导航栏
li,ol,ul {
    list-style: none
}
.m-fixedBar {
    position: fixed;
    top: 220px;
    right: 10px;
    z-index: 999;
    width: 71px;
    padding: 0 5px;
    background: #fff;
    box-shadow: 0 0 18px rgba(0,0,0,.1)
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.m-fixedBar li {
    padding: 10px;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
    cursor: pointer;
    position: relative
}
.m-icons-service-fixed {
    width: 30px;
    height: 30px;
    background-position: 0 -1644px
}
a {
    text-decoration: none
}

a,button {
    outline: none
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
//固定导航栏隐藏信息
.m-fixedBar .fixed-service-pop {
    width: 230px;
    left: -244px
}
.m-fixedBar .fixed-pop {
    position: absolute;
    left: -144px;
    top: 0;
    display: none;
    padding-right: 20px
}
.m-fixedBar .fixed-service-pop .pop-inner {
    padding: 10px 18px;
    border: 1px solid #dfdfdf;
    background: #fff
}
.m-fixedBar .pop-inner {
    padding: 10px;
    border: 1px solid #dfdfdf;
    background: #fff
}
.m-fixedBar .fixed-service-pop .info-title {
    margin-top: 8px;
    color: #333;
    font-size: 12px
}
.m-fixedBar .fixed-service-pop .info-phone {
    margin-top: 15px;
    color: #845f3f;
    font-size: 20px
}

.m-fixedBar .fixed-service-pop .info-day {
    margin-top: 1px;
    color: #666;
    font-size: 12px
}

.m-fixedBar .fixed-service-pop .info-des {
    margin-top: 18px;
    color: #333;
    font-size: 12px
}
.m-fixedBar .fixed-pop .m-icons {
    position: absolute;
    right: 15px;
    top: 15px
}
.m-icons-arrow-right {
    width: 6px;
    height: 12px;
    background-position: 0 -38px
}
</style>